const id = location.search.split("?")[1];

ajax("http://localhost:3000/api",{
    type:"getDetail",
    id:id
}).then(res=>{
    res = JSON.parse(res);

    // console.log(res);
    if(res.code === 1){
        // 准备渲染
        render(res.data);
        // console.log(res.data);
    }else if(res.code === 0){
        alert("商品卖完了");
        location.href = "http://localhost:3000/bowl.html"
    }
})




const Zz = document.querySelector(".zz");  // 遮罩
const box = document.querySelector(".box"); // 放大镜部分的放大镜

const sImg = document.querySelector(".img-img"); // 中图
const bImg = document.querySelector(".bimg-img"); // 大图
const proName = document.querySelector(".title_text"); // 名字
const newPrice = document.querySelector(".price"); //价格1
const oldPrice = document.querySelector("._price"); //价格2
const imgBox = document.querySelector(".list");  // 切换卡
const left = document.getElementById("left"); // 左按钮
const right = document.getElementById("right") // 右按钮
const li = document.querySelectorAll(".list");
// 渲染
function render(data){
    // 根据数据，渲染页面结构
    sImg.src = data.img;
    bImg.src = data.img;
    proName.innerHTML = data.name;
    oldPrice.innerHTML = data.price + 10;
    newPrice.innerHTML = data.price;

    let str = "";
    for(let i=0;i<data.imgs.length;i++){
        str += `
        <span id="left" style="background: #f1f1f1;float: left;position: absolute;left: 0px;height: 72px;
                        width: 10px;
                        margin-right: 20px;line-height: 72px;
                        text-align: center;">&lt;</span>
        <li><img src="${data.imgs[i]}"></li>
        <span id="right" style="float: right;
                        position: absolute;
                        right: 0px;
                        height: 72px;
                        width: 10px;
                        margin-left: 10px;
                        background: #f1f1f1;
                        line-height: 72px;
                        text-align: center;">&gt;</span>`
                    }
    imgBox.innerHTML = str;
    new Magnifier(
        {box:document.querySelector(".box"),
         sBox:document.querySelector(".sBox"),
         Zz:document.querySelector(".zz"),
         sImg:document.querySelector(".img"),
         sImgb:document.querySelector(".img img"),
         bBox:document.querySelector(".bimg"),
         bImg:document.querySelector(".bimg img"),
         ul:document.querySelector(".list"),
         lis:document.querySelectorAll(".list li img"),
         left:document.querySelector("#left"),
         right:document.querySelector("#right")}
    )

    // 渲染完成之后，再执行放大镜效果
}
function ajax(url, data){
    let str = "";
    for(let i in data){
        str += `${i}=${data[i]}&`
    }
    url += "?" + str;

    const xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send();

    return new Promise((resolve,reject)=>{
        xhr.onload = function(){
            if(xhr.status === 200){
                resolve(xhr.responseText);
            }else{
                reject(xhr.status);
            }
        }
    })
}

const zspan = document.querySelector("#zspan");
// console.log(zspan);
// const id = location.search.split("?")[1];
let src = "./shopping.html"
zspan.onclick = function(){
    location.assign(src + "?" + id)
}



// function bendi(id, price){
//     const goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
//     if(goods.length < 1){
//         goods.push({
//             id: id,
//             num: 1,
//             flag: 0,
//             price
//         })
//     }else{
//         let i=0;
//         const flag = goods.some((val,idx)=>{
//             i = idx;
//             return val.id === id;
//         })
//         if(flag){
//             goods[i].num++;
//         }else{
//             goods.push({
//                 id: id,
//                 num: 1,
//                 flag: 0,
//                 price
//             })
//         }
//     }
//     localStorage.setItem("goods", JSON.stringify(goods));
// }
// bendi();






